<template>
  <div class="login-bg flex h-screen w-screen items-center justify-center">
    <div class="relative px-[58px] pb-[69px] pt-[36px]">
      <div class="horn">
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
      </div>
      <h3 class="mb-[45px] flex flex-col items-center">
        <p class="title">克勒沟数字乡村</p>
        <p class="title-detail">KELEGOU DIGITAL VILLAGE</p>
      </h3>
      <el-form
        label-width="auto"
        label-position="top"
        size="large"
        class="login-form w-[340px]"
      >
        <el-form-item label="账号">
          <el-input v-model="loginForm.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" />
        </el-form-item>
        <el-form-item label="验证码">
          <div class="flex w-full">
            <el-input v-model="loginForm.code" class="mr-3 flex-1" />
            <div @click="resetCode" class="h-[40px] w-[120px]">
              <el-image :src="codeUrl" class="h-full w-full rounded-[4px]" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex w-full flex-col">
            <el-button
              type="primary"
              class="button_default !border-[#2DF2FF] outline-0"
              @click="login_btn"
              >登录</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import user from '@/stores/user'
import router from '@/router'

const useUserStore = user()
const codeUrl = ref('') // 图形验证码
const loginForm = ref({
  account: '',
  password: '',
  code: ''
})

// 重置验证码
const resetCode = () => {
  let baseUrl = `/api/village/code/getGraphic`
  baseUrl += '?rand=' + Math.random()
  codeUrl.value = baseUrl
}

// 登录
const login_btn = () => {
  console.log(loginForm.value)
  useUserStore.loginSystem(loginForm.value) // 调用登录请求
  setTimeout(() => router.push('/'), 200)
}

onMounted(() => resetCode()) // 挂载时调用图片验证码接口
</script>

<style scoped>
.login-bg {
  background: url('@/assets/svg/login/bg.png') no-repeat;
  background-size: cover;
}

.title {
  width: 280px;
  height: 40px;
  font-size: 30px;
  font-family: MicrosoftYaHei;
  color: #2df2ff;
  line-height: 40px;
  letter-spacing: 10px;
}

.title-detail {
  width: 271px;
  height: 16px;
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: #5e9db4;
  line-height: 16px;
  letter-spacing: 5px;
}

.login-form {
}

.horn {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid #2df2ff;
  border-radius: 10px;
}
.horn > div {
  width: 24px;
  height: 24px;
  position: absolute;
}
.horn .lt {
  border-top: 3px solid #2df2ff;
  border-left: 3px solid #2df2ff;
  border-top-left-radius: 10px;
  left: -3px;
  top: -3px;
}
.horn .rt {
  border-top: 3px solid #2df2ff;
  border-right: 3px solid #2df2ff;
  border-top-right-radius: 10px;
  right: -3px;
  top: -3px;
}
.horn .rb {
  border-bottom: 3px solid #2df2ff;
  border-right: 3px solid #2df2ff;
  border-bottom-right-radius: 10px;
  right: -3px;
  bottom: -3px;
}
.horn .lb {
  border-bottom: 3px solid #2df2ff;
  border-left: 3px solid #2df2ff;
  border-bottom-left-radius: 10px;
  left: -3px;
  bottom: -3px;
}
</style>
